@import "~@/styles/variables.module.scss";

$main-transition-time: .2s;
// 主内容区过渡动画
.main-enter-active {
  transition: all $main-transition-time ease-in !important;
}

.main-leave-active {
  transition: all $main-transition-time ease-out !important;

}

.main-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

.main-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

// logo 过渡动画
.logo-enter-active {
  transition: opacity #{$transitionTime} .25s;
}

.logo-leave-active {
  transition: opacity #{$transitionTime};
}

.logo-enter-from,
.logo-leave-to {
  opacity: 0;
}

.confirm-enter-active .mask,
.confirm-leave-active .mask {
  transition: opacity .2s ease-in-out;
}

.confirm-enter-from .mask,
.confirm-leave-to .mask {
  opacity: 0;
}

.confirm-enter-active .container,
.confirm-leave-active .container {
  transition: all .4s ease;
}

.confirm-enter-from .container,
.confirm-leave-to .container {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8) !important;
}
